import {View, Text, ScrollView} from "@tarojs/components";
import {Cell, Button, Empty, Image, CellGroup} from "@antmjs/vantui";
import React, {useCallback, useEffect, useRef, useState} from "react";
import AssetImage from "@/common/AssetImage";

import {TeamModel} from "@/common/apis/model";
import {teamJoinApi, teamListApi} from "@/common/apis/home_datasource";
import LogUtils from "@/utils/log";
import Utils from "@/utils/common";
import LocalUtils from "@/utils/local_utils";
import RouthPath from "@/common/RouthPath";


definePageConfig({
  navigationBarTitleText: '课题组'
})
export default function ResearchTeam() {

  const [items, setItems] = useState<TeamModel[]>()
  const [items2, setItems2] = useState<TeamModel[]>()


  const getItems = useCallback(() => {
    teamListApi().then((res) => {
      setItems(res)
    })
  }, []);
  const getItems2 = useCallback(() => {
    teamJoinApi().then((res) => {
      setItems2(res)
    })
  }, []);
  useEffect(() => {
    getItems()
    getItems2()
    return () => {
    }
  }, []);

  const avatar = useRef(LocalUtils.getUserinfo().avatar);

  return (
    <View style={{height: '100vh', display: 'flex', flexDirection: 'column'}}>
      <View style={{height: '100px'}}>
        <Cell title='添加课题组' isLink size='small' onClick={() => {
          Utils.navigateTo({
            url: RouthPath.searchTeam
          })
        }}
        />
        <Cell title='课题组申请列表' isLink size='small' onClick={() => {
          Utils.navigateTo({
            url: RouthPath.applyTeamPage
          })
        }}
        />
      </View>
      <View style={{marginTop: '0px', flex: 1, position: 'relative', overflow: 'hidden'}}>
        <ScrollView scrollY style={{height: '100%', boxSizing: 'border-box'}}>
          <CellGroup title='我创建的课题组'>
            {
              items && !Utils.isEmpty(items) ? items.map((e, i) => {
                return <Cell key={e.id} renderIcon={<Image src={avatar.current}
                  style={{
                                                             width: '40px',
                                                             height: '40px',
                                                             borderRadius: '50%',
                                                             marginRight: '10px'
                                                           }}
                />}
                  renderTitle={<Text style={{fontSize: '16px'}}>{e.name}</Text>}
                  isLink
                  renderLabel={e.review === 0 ?
                               <Text style={{fontSize: '14px', color: 'red'}}>审核中</Text> : null}
                  onClick={() => {
                               const url = Utils.getUrlWithObject(RouthPath.researchTeamDetail, e)

                               Utils.navigateAndListenToEvent(url, 'teamDelete', (data) => {
                                 if (data) {
                                   getItems()
                                   getItems2()
                                 }
                               })
                             }}
                />
              }) : <Empty description='暂无数据' />
            }
          </CellGroup>
          <CellGroup title='我参与的课题组'>
            {
              items2 && !Utils.isEmpty(items2) ? items2.map((e, i) => {
                return <Cell key={e.id} renderIcon={<Image src={e.avatar}
                  style={{
                                                             width: '40px',
                                                             height: '40px',
                                                             borderRadius: '50%',
                                                             marginRight: '10px'
                                                           }}
                />}
                  renderTitle={<Text style={{fontSize: '16px'}}>{e.name}</Text>}
                  isLink
                  onClick={() => {
                               const url = Utils.getUrlWithObject(RouthPath.researchTeamDetail, e)
                               LogUtils.info('url', url)
                               Utils.navigateAndListenToEvent(url, 'teamDelete', (data) => {
                                 if (data) {
                                   getItems()
                                   getItems2()
                                 }
                               })
                             }}
                />
              }) : <Empty description='暂无数据' />
            }

          </CellGroup>
        </ScrollView>
      </View>
      <View style={{margin: '20px'}}>
        <Button color={AssetImage.themeColor} block onClick={() => {
          if (LocalUtils.isVIdCard()) {
            Utils.navigateAndListenToEvent(RouthPath.researchTeamCreate, 'teamAdded', (data) => {
              if (data) {
                getItems()
                getItems2()
              }
            })
          } else {
            Utils.modal('实名认证', "请先进行实名认证,才能预约", true, (ok) => {
              if (ok) {
                Utils.navigateTo({
                  url: RouthPath.realInfoVerify
                })
              }
            })
          }
        }}
        >
          创建课题组
        </Button>
      </View>
    </View>
  )
}


